import React, {Component} from 'react'
import {
    ListRenderItemInfo,
    ActivityIndicator,
    RefreshControl,
    FlatList,
    StyleSheet,
    View,
    Text
} from 'react-native'
import Banner from './Banner'
import ListViewCard from '../../../components/elements/ListViewCard'
import theme from '../../../config/theme'

const CITY_NAMES: HomeFlatList.listItem[] = [
    {
        title: '最新电视剧',
        content: [
            {
                title: '阳光先生',
                url: 'https://1img.hanjutv.com/201806/dcdad2cd3b.jpg',
                des: '主演:李秉宪,金泰梨,柳演锡,金敏贞'
            },
            {
                title: 'Life',
                url: 'https://1img.hanjutv.com/201807/16313811b1.jpg',
                des: '主演:申惠善，梁世宗'
            },
            {
                title: '虽然30但仍17',
                url: 'https://1img.hanjutv.com/201807/1d8546c741.jpg',
                des: '主演:曹承佑,李栋旭,元珍雅'
            },
            {
                title: '时间',
                url: 'https://1img.hanjutv.com/201807/a5e139cb71.jpg',
                des: '主演:徐珠贤,金正贤,金俊汉,金正泰, 黄胜妍'
            },
            {
                title: '你，应对法',
                url: 'https://1img.hanjutv.com/201806/8dce71fb7b.jpg',
                des: '主演:김영대,李厦莹'
            },
            {
                title: '秘密与谎言',
                url: 'https://1img.hanjutv.com/201806/4abd94926d.jpg',
                des: '主演:徐海元,金庆南,吳丞芽,李钟文'
            }
        ]
    },
    {
        title: '最新电影',
        content: [
            {
                title: '夜关门：欲望之花',
                url: 'https://images.hanjutv.com/vod/2017-03-08/58bfd537b5e57.jpg',
                des: '主演:申星一，裴涩琪'
            },
            {
                title: '你恋爱了吗？',
                url: 'https://1img.hanjutv.com/202008/5bed8ad33c.jpg',
                des: '主演:金素恩,成勋'
            },
            {
                title: '魂：恐怖的开始',
                url: 'https://1img.hanjutv.com/202008/bd96d17ffc.jpg',
                des: '主演:玉智英,崔圭换,金承铉,池依秀'
            },
            {
                title: '霸',
                url: 'https://1img.hanjutv.com/202008/1eb18ce25e.png',
                des: '主演:车智赫 赵善基 玉允中 白载民 金大涵 李正贤'
            },
            {
                title: '消失的时间',
                url: 'https://1img.hanjutv.com/202008/0f94f93caf.png',
                des: '主演:姜栋元 裴秀彬 郑海均 车秀妍'
            },
            {
                title: '正直的候选人',
                url: 'https://1img.hanjutv.com/202007/47dc2cbec2.png',
                des: '主演:罗美兰 / 金武烈 / 罗文姬 / 尹敬浩 / 宋永彰 / 温宙完 / 赵汉哲 / 孙钟学 / 赵秀'
            }
        ]
    }
]

interface Props {}
interface State {
    isLoading: boolean
    dataArray: HomeFlatList.listItem[]
}

const COLOR: string = theme.mainBackgroundColor
export default class FlatListBasics extends Component<Props, State> {
    constructor(props: Props) {
        super(props)
    }

    public state: State = {
        isLoading: false,
        dataArray: CITY_NAMES
    }

    _renderItem(data: ListRenderItemInfo<HomeFlatList.listItem>) {
        return <ListViewCard {...data.item}/>
    }

    componentDidMount() {
        const { dataArray } =this.state
    }

    loadData(refreshing?: boolean){
        console.log('loadData=========')
        if (refreshing) {
            this.setState({
                isLoading:true
            });
        }

        setTimeout(()=>{
            let dataArray = [];
            if (refreshing) {
                for(let i = this.state.dataArray.length-1;i>=0;i--){
                    dataArray.push(this.state.dataArray[i]);
                }
            }
            else {
                dataArray=this.state.dataArray.concat(CITY_NAMES);
            }

            this.setState({
                dataArray:dataArray,
                isLoading:false
            })
        },2000);
    }

    //上拉加载布局
    renderLoadMoreView() {
        return <View style={styles.loadMore}>
            <ActivityIndicator
                style={styles.indicator}
                size={"large"}
                color={COLOR}
                animating={true}
            />
            <Text>正在加载更多</Text>
        </View>
    }




    genIndicator() {
        // 如果是隐藏的话就不显示
        return (
            <View style={styles.indicatorContainer}>
                <ActivityIndicator
                    style={styles.indicator}
                    size={"large"}
                    color={COLOR}
                    animating={true}
                />
                <Text>正在加载更多</Text>
            </View>
        )

    }

    _keyExtractor = (item: any, index: number) => index + ""

    render() {
        const {isLoading, dataArray} = this.state
        return (
            <View style={styles.container}>
                <FlatList
                    data={dataArray}
                    keyExtractor={this._keyExtractor}
                    renderItem={(data: ListRenderItemInfo<HomeFlatList.listItem>) => this._renderItem(data)}
                    ListHeaderComponent={Banner}
                    ListFooterComponent={() => this.genIndicator()}
                    refreshControl={
                        <RefreshControl
                            title={"拼命加载中..."} //android中设置无效
                            colors={[COLOR]} //android
                            tintColor={COLOR} //ios
                            titleColor={COLOR}
                            refreshing={isLoading}
                            onRefresh={() => {
                                this.loadData(true) //下拉刷新加载数据
                            }}
                        />
                    }
                    onEndReached={()=>{
                        this.loadData()
                    }}
                    onEndReachedThreshold={0.1} // 这个属性的意思是 当滑动到距离列表内容底部不足 0.1*列表内容高度时触发onEndReached函数 为啥要加这个属性 因为不加的话滑动一点点就会立即触发onReached函数，看不到菊花加载中
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
    text: {
        color: "red",
        fontSize: 20,
    },

    loadMore: {
        alignItems: "center"
    },
    indicatorContainer: {
        alignItems: 'center'
    },
    indicator: {
        color: 'red',
        margin: 10
    }
})
